<template>
    <view class="dynamic_main_view" v-if="dynamicData">
        <view class="dynamic_content_view">
            <view @click="goToHomePage" class="dynamic_header">
                <image class="dynamic_head" :src="dynamicData.avatarAbsolute"></image>
                <view class="dynamic_middle">
                    <label class="dynamic_user_name">{{ dynamicData.userName }}</label>
                    <label v-if="dynamicData.publishTime" class="dynamic_time"
                        >{{ request.getDateTimeFormat(dynamicData.publishTime)
                        }}<span style="margin-left: 10rpx; color: #cccccc">发布了</span></label
                    >
                </view>
                <!-- 				<view class="dynamic_follow_btn">
					<image style="width: 16rpx;height: 16rpx;" src="../../../static/img/community/add_follow.png"></image>
					<label style="margin-left: 8rpx;color: #FF822E;font-size: 24rpx;">关注</label>
				</view> -->
                <view v-if="userInfo.uid != dynamicData.userId" style="margin-left: auto; margin-right: 30rpx">
                    <view
                        class="search-right1"
                        v-if="dynamicData.followStatus == 0"
                        @click.stop="goCollect(dynamicData)"
                    >
                        <image
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png"
                            mode=""
                        ></image
                        >关注
                    </view>
                    <view class="search-right2" v-else @click.stop="goCollect(dynamicData)">已关注</view>
                </view>
            </view>
            <label class="dynamic_title">{{ dynamicData.title }}</label>
            <label class="dynamic_content_label">{{ dynamicData.experience }}</label>
            <view class="dynamic_img_view">
                <image
                    @click="showImagePrevie(imgIndex)"
                    class="dynamic_img"
                    :src="img"
                    v-for="(img, imgIndex) in dynamicData.picList"
                    :key="imgIndex"
                    mode="aspectFill"
                ></image>
            </view>
            <view @click="goToTopicDetail(dynamicData.topicId)" v-if="dynamicData.topicId" class="huati_tag">
                <view class="huati_tag_title">
                    <view class="huati_logo">#</view>
                    <label class="huati_content_tag">{{ dynamicData.topicName }}</label>
                </view>
            </view>
        </view>
        <view v-if="dynamicData.commentList && dynamicData.commentList.length > 0" class="comments_view">
            <view
                class="first_comment_view"
                v-for="(firstComment, firstCommentIndex) in dynamicData.commentList"
                :key="firstCommentIndex"
            >
                <view class="first_comment_user_view">
                    <image class="first_comment_head" :src="firstComment.avatarAbsolute"></image>
                    <view class="first_comment_info">
                        <label class="first_comment_user_name">
                            <view class="comment_user_name_title">{{ firstComment.userName }}</view>
                            <span v-if="firstComment.userId == dynamicData.userId" class="zuo_zhe">作者</span>
                        </label>
                        <label class="first_comment_time">{{ firstComment.commentTime.slice(5, 16) }}</label>
                        <label @click="clickComment(firstComment)" class="first_comment_content">{{
                            firstComment.delStatus == 1 ? "该评论已删除" : firstComment.content
                        }}</label>
                        <view class="second_comment_view">
                            <block
                                v-for="(secondComment, secondCommentIndex) in firstComment.commentList"
                                :key="secondCommentIndex"
                            >
                                <block v-if="secondCommentIndex < firstComment.commentLength">
                                    <view class="second_comment_user_view">
                                        <image class="second_comment_user_head" :src="secondComment.avatarAbsolute">
                                        </image>
                                        <label class="second_comment_user_name">
                                            <view class="comment_user_name_title">{{ secondComment.userName }}</view>
                                            <span v-if="secondComment.userId == dynamicData.userId" class="zuo_zhe"
                                                >作者</span
                                            >
                                        </label>
                                    </view>
                                    <label
                                        @click="clickComment(secondComment)"
                                        class="second_comment_content"
                                        v-if="secondComment.delStatus == 1"
                                        >该评论已删除
                                    </label>
                                    <label @click="clickComment(secondComment)" class="second_comment_content" v-else
                                        >回复
                                        <text style="color: #999">{{ secondComment.commentUserName }} : </text>
                                        {{ secondComment.content }}</label
                                    >
                                    <label class="second_comment_time" style="margin-bottom: 10rpx">{{
                                        secondComment.commentTime.slice(5, 16)
                                    }}</label>
                                </block>
                            </block>
                            <view
                                class="dynamic-more"
                                v-if="firstComment.commentList.length > 1 && firstComment.checked"
                                @click="getMoreComment(firstComment.commentList.length, firstComment)"
                                >点击查看更多<image
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/arrow.png"
                                ></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="null_comments_view">
            <image
                style="margin-top: 96rpx; width: 316rpx; height: 316rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx; font-weight: 600">暂无评论</label>
        </view>
        <dynamic-bottom-view
            @collection="collection"
            @thumb="thumb"
            :mainData="dynamicData"
            v-if="isShowComment == false"
            @writecomment="clickComment()"
        ></dynamic-bottom-view>
        <qizai9527-input-comment
            :placeholder="placeholder"
            :isShow="isShowComment"
            @submitComment="submitComment"
            @clickOther="clickOther"
        >
        </qizai9527-input-comment>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            isShowComment: false,
            placeholder: "说点什么…",
            curcomment: {},
            id: "",
            dynamicData: {},
            collectionForm: {
                id: "",
                status: "",
            },
            thumbForm: {
                id: "",
                thumbsStatus: "",
            },
            commentLength: 1,
            commentFalg: true,
        };
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    methods: {
        getMoreComment(length, item) {
            if (item.commentLength < length) {
                item.commentLength += 5;
                if (item.commentLength >= length) {
                    item.checked = false;
                }
            } else {
                item.checked = false;
            }
        },
        goToTopicDetail(id) {
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${id}`,
            });
        },
        goToHomePage() {
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${this.dynamicData.userId}`,
            });
        },
        goCollect(item) {
            let form = {
                id: item.userId,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                    } else {
                        item.followStatus = 1;
                    }
                });
            } else {
                uni.showModal({
                    cancelText: "取消",
                    confirmText: "确定",
                    title: "是否确认取消关注此用户？",
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        this.helper.showToast(res.message);
                                    } else {
                                        item.followStatus = 0;
                                    }
                                });
                        }
                    },
                });
            }
        },
        collection() {
            if (this.dynamicData.collectStatus == 1) {
                uni.showModal({
                    cancelText: "取消",
                    confirmText: "确定",
                    title: "是否确认取消收藏此动态？",
                    success: (res) => {
                        if (res.confirm) {
                            this.collectionReqeust();
                        }
                    },
                });
            } else {
                this.collectionReqeust();
            }
        },
        collectionReqeust() {
            if (this.dynamicData.collectStatus == 0) {
                this.collectionForm.id = this.id;
                this.collectionForm.status = 1;
            } else {
                this.collectionForm.id = this.id;
                this.collectionForm.status = 0;
            }
            this.request
                .httpTokenJsonRequest("/mp-api/wx/trends/collect", this.collectionForm, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        if (this.dynamicData.collectStatus == 0) {
                            uni.showToast({
                                icon: "success",
                                title: "收藏成功",
                            });
                            this.dynamicData.collections = this.dynamicData.collections + 1;
                            this.dynamicData.collectStatus = 1;
                        } else {
                            uni.showToast({
                                icon: "success",
                                title: "取消成功",
                            });
                            if (this.dynamicData.collections > 0) {
                                this.dynamicData.collections = this.dynamicData.collections - 1;
                            }
                            this.dynamicData.collectStatus = 0;
                        }
                    }
                });
        },
        thumb() {
            if (this.dynamicData.thumbsStatus == 1) {
                this.thumbForm.id = this.id;
                this.thumbForm.thumbsStatus = 0;
            } else {
                this.thumbForm.id = this.id;
                this.thumbForm.thumbsStatus = 1;
            }
            this.request.httpTokenJsonRequest("/mp-api/wx/trends/thumbs", this.thumbForm, "POST", true).then((res) => {
                if (res.code == 0) {
                    if (this.dynamicData.thumbsStatus == 0) {
                        this.dynamicData.thumbs = this.dynamicData.thumbs + 1;
                        this.dynamicData.thumbsStatus = 1;
                    } else {
                        if (this.dynamicData.thumbs > 0) {
                            this.dynamicData.thumbs = this.dynamicData.thumbs - 1;
                        }
                        this.dynamicData.thumbsStatus = 0;
                    }
                }
            });
        },
        // 点击评论触发评论输入框
        clickComment(e) {
            if (e) {
                this.curcomment = e;
            } else {
                this.curcomment = {};
            }
            if (this.curcomment.id) {
                this.placeholder = "回复 " + this.curcomment.userName + "：";
            } else {
                this.placeholder = "说点什么…";
            }
            this.isShowComment = true;
        },
        // 提交评论
        submitComment(e) {
            if (e == null && e == "") {
                return;
            }
            const checkedContent = e.replace(/\s/g, "");
            if (checkedContent === "") {
                uni.showToast({
                    title: "评论不能全部为空格",
                    icon: "none",
                });
                return;
            }
            this.isShowComment = false;
            var form = {};
            if (this.curcomment.id) {
                if (this.curcomment.rootId == 0 || this.curcomment.rootId == undefined) {
                    form = {
                        commentLevel: 2,
                        content: e,
                        trendsId: this.id,
                        rootId: this.curcomment.id,
                        commentUserId: this.curcomment.userId,
                    };
                } else {
                    form = {
                        commentLevel: 2,
                        content: e,
                        trendsId: this.id,
                        rootId: this.curcomment.rootId,
                        parentId: this.curcomment.id,
                        commentUserId: this.curcomment.userId,
                    };
                }
            } else {
                form = {
                    commentLevel: 1,
                    content: e,
                    trendsId: this.id,
                };
            }
            this.request.httpTokenJsonRequest("/mp-api/wx/trends/comment", form, "POST", true).then((res) => {
                if (res.code == 0) {
                    this.requestMain();
                }
            });
        },
        // 点击空白返回并保存记忆
        clickOther(e) {
            this.isShowComment = false;
        },
        requestMain() {
            this.request
                .httpTokenJsonRequest(`/mp-api/wx/trends/details/${this.id}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        res.data.commentList
                            ? res.data.commentList.forEach((item) => {
                                  item.checked = true;
                                  item.commentLength = 1;
                              })
                            : [];
                        this.dynamicData = res.data;
                    }
                });
        },
        showImagePrevie(index) {
            uni.previewImage({
                urls: this.dynamicData.picList,
                current: index,
            });
        },
    },
    onLoad(option) {
        this.id = option.id;
    },
    onShow() {
        this.requestMain();
    },
    onUnload() {
        uni.$emit("dynamicItem", this.dynamicData);
    },
};
</script>

<style scoped>
page {
    background-color: #f6f6f6;
}

.dynamic_main_view {
    padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
}

.dynamic_content_view {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding-bottom: 40rpx;
    width: 100%;
}

.dynamic_header {
    height: 120rpx;
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dynamic_head {
    /* margin-left: 30rpx; */
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #eaeaea;
}

.dynamic_middle {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    width: 65%;
}

.dynamic_user_name {
    color: #333333;
    margin-top: 2rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.comment_user_name_title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dynamic_time {
    color: #999999;
    margin-top: 4rpx;
    font-size: 22rpx;
    line-height: 32rpx;
}

.dynamic_follow_btn {
    width: 112rpx;
    height: 48rpx;
    border-radius: 52rpx;
    border: 2rpx solid #ff822e;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    margin-right: 30rpx;
    justify-content: center;
}

.dynamic_title {
    color: #333333;
    margin-top: 10rpx;
    margin-left: 30rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    margin-right: 30rpx;
    width: calc(100% - 60rpx);
}

.dynamic_content_label {
    margin-top: 10rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    width: calc(100% - 60rpx);
    color: #999999;
    line-height: 40rpx;
    font-size: 28rpx;
}

.dynamic_img_view {
    display: flex;
    margin-top: 20rpx;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 30rpx;
    margin-right: 18rpx;
    width: calc(100% - 48rpx);
}

.dynamic_img {
    width: 222rpx;
    height: 222rpx;
    border-radius: 24rpx;
    margin-bottom: 12rpx;
    background-color: #eaeaea;
    margin-right: 12rpx;
}

.huati_tag {
    min-height: 46rpx;
    border: 1rpx solid #cccccc;
    border-radius: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 18rpx 30rpx 0 30rpx;
    width: fit-content;
}

.huati_content_tag {
    margin-left: 6rpx;
    color: #333333;
    font-size: 24rpx;
    padding-right: 12rpx;
    flex: 1;
}

.huati_logo {
    background-color: #ff822e;
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 34rpx;
    color: #fff;
    margin-left: 6rpx;
    font-size: 24rpx;
}

.comments_view {
    margin-top: 20rpx;
    width: 100%;
    background-color: #fff;
    padding-bottom: 30rpx;
}

.null_comments_view {
    margin-top: 20rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 120rpx;
}

.first_comment_view {
    display: flex;
    flex-direction: column;
}

.first_comment_user_view {
    display: flex;
    flex-direction: row;
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
}

.first_comment_head {
    width: 80rpx;
    height: 80rpx;
    background-color: #eaeaea;
    border-radius: 50%;
}

.first_comment_info {
    display: flex;
    flex-direction: column;
    margin-left: 24rpx;
    width: calc(100% - 164rpx);
}

.first_comment_user_name {
    color: #999999;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 28rpx;
}

.first_comment_time {
    color: #999999;
    font-size: 22rpx;
    margin-top: 4rpx;
}

.first_comment_content {
    margin-top: 20rpx;
    color: #333333;
    font-size: 28rpx;
    width: 100%;
}

.second_comment_view {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 30rpx;
}

.second_comment_user_view {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.second_comment_user_head {
    width: 40rpx;
    height: 40rpx;
    background-color: #eaeaea;
    border-radius: 50%;
}

.second_comment_user_name {
    color: #999999;
    margin-left: 14rpx;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 28rpx;
    width: calc(100% - 50rpx);
}

.second_comment_content {
    margin-top: 8rpx;
    width: calc(100% - 54rpx);
    margin-left: 54rpx;
    color: #333333;
    font-size: 28rpx;
}

.second_comment_time {
    margin-left: 54rpx;
    margin-top: 4rpx;
    color: #999999;
    font-size: 22rpx;
}

.zuo_zhe {
    width: 70rpx;
    height: 32rpx;
    line-height: 32rpx;
    color: #009977;
    background-color: #f3faf8;
    font-size: 22rpx;
    text-align: center;
    margin-left: 18rpx;
    border-radius: 8rpx;
}

.more_comment_btn {
    color: #009977;
    margin-left: 54rpx;
    font-size: 28rpx;
    line-height: 44rpx;
}
</style>
